<template>
  <!-- Home页 -->
  <div id="app">
    <div class="content">
      <!-- 左侧导航栏 -->
        <div class="L-banner hidden-xs-only">
          <el-menu default-active="1-4-1" class="el-menu-vertical-demo">
            <!-- 导航区域 -->
            <el-menu-item index="1">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span slot="title">导航一</span>
              </template>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-document"></i>
              <span slot="title">导航三</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <span slot="title">导航四</span>
            </el-menu-item>
          </el-menu>
        </div>

      <!-- 右侧内容区域 -->
      <div class="main">
        <div class="title">
          <h1>Alicia</h1>
          <h5>个人导航</h5>
        </div>

        <!-- 搜索框 -->
        <div class="search">
          <div class="search_inner">
            <div class="search_box">
              <span
                class="s_button"
                @mouseenter="showEngineBox = true"
                @mouseleave="showEngineBox = false"
                >{{ engine_name }}</span
              >
              <input
                type="text"
                class="s_text"
                v-model="search_text"
                placeholder="Search what you want"
                @keyup.enter="GoSearch"
              />
            </div>
            <div class="search_btn" @click="GoSearch">搜索</div>
          </div>
          <!-- 搜索引擎选择 -->
          <div
            class="search_engine"
            v-show="showEngineBox"
            @mousemove="showEngineBox = true"
            @mouseleave="showEngineBox = false"
          >
            <div class="engine_head">
              <strong>Select Search Engine：</strong>
            </div>
            <div class="engine_list">
              <span
                v-for="(item, index) in engine_list"
                :key="index.id"
                @click="checkEngine(item.name)"
                >{{ item.name }}</span
              >
            </div>
          </div>
        </div>

        <!-- 主体内容区域 -->
        <HNavigation></HNavigation>
      </div>
    </div>
  </div>
</template>

<script>
import HNavigation from "./HNavigation.vue";
import { Message } from "element-ui";

export default {
  name: "app",
  components: {
    HNavigation,
  },
  data() {
    return {
      showEngineBox: false,
      engine_name: "baidu", //搜索引擎名字
      search_text: "", //搜索字段
      engine_list: [
        { id: "1", name: "baidu" },
        { id: "2", name: "bilibili" },
      ],
    };
  },
  methods: {
    //搜索
    GoSearch() {
      if (this.search_text.trim() != "") {
        if (this.engine_name === "baidu") {
          window.open("https://www.baidu.com/s?wd=" + this.search_text);
        } else if (this.engine_name === "bilibili") {
          window.open(
            "https://search.bilibili.com/all?keyword=" + this.search_text
          );
        }
      } else {
        Message({
          message: "不能搜索空白词条",
          type: "warning",
          duration: "1000",
        });
      }
    },
    //搜索引擎选择
    checkEngine(name) {
      this.engine_name = name;
      this.showEngineBox = false;
    },
  },
};
</script>

<style scoped lang='less'>
.content {
  // color: #145ccd;
  height: 100%;
  display: flex;
}
.L-banner {
  position: fixed;
  top: 80px;
  .el-menu-vertical-demo {
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .el-menu-item {
    color: #aaa;
  }
}
.main {
  width: 100%;
  margin-left: 200px;
  .title {
    font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    margin-top: 30px;
    color: #fff;
    text-align: center;
    h5 {
      padding-top: 8px;
    }
  }
  .search {
    position: relative;
    width: 600px;
    margin: 20px auto;
    .search_inner {
      display: flex;
    }
    .search_box {
      display: flex;
      width: 520px;
      height: 40px;
      border: 1px solid #74b9ff;
      border-top-left-radius: 30px;
      border-bottom-left-radius: 30px;
      border-right: none;
      .s_button {
        display: inline-block;
        text-align: center;
        line-height: 40px;
        height: 100%;
        width: 85px;
        color: #fff;
        font-weight: bold;
        font-size: 18px;
        cursor: pointer;
      }
      .s_button::after {
        content: "|";
        margin-left: 5px;
        font-weight: normal;
        vertical-align: bottom;
      }
      .s_text {
        height: 100%;
        border: none;
        outline: none;
        flex: 1;
        background-color: transparent;
        font-size: 16px;
        color: #eee;
      }
      .s_text::placeholder {
        color: #ccc;
      }
    }
    .search_btn {
      flex: 1;
      width: 75px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      background-color: #74b9ff;
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
      cursor: pointer;
    }
    .search_engine {
      box-sizing: border-box;
      position: absolute;
      top: 55px;
      left: 0;
      width: 100%;
      background: #fff;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0px 5px 20px 0px #d8d7d7;
      transition: all 0.5s;
      z-index: 999;
      .engine_list span {
        display: inline-block;
        line-height: 30px;
        font-size: 16px;
        padding: 5px 10px 5px 10px;
        margin: 8px 15px 5px 0;
        background: #f9f9f9;
        color: #999;
        cursor: pointer;
      }
      .engine_list::before {
        content: "";
        width: 0px;
        height: 0px;
        position: absolute;
        top: -19px;
        left: 20px;
        border-top: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #fff;
        border-left: 10px solid transparent;
      }
    }
  }
}

.el-menu-vertical-demo {
  border: 0;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
